<template>
  <div class="content-footer">
    <div class="content-footer-warp">
      <div class="masen-container">
        <div class="content-footer-main">
          <div class="content-footer-nav">
            <ul>
              <li v-for="(item, index) in footerContent.footerLink" :key="index">
                <router-link v-if="!externalLink(item.link)" v-bind:to="item.link">{{item.title}}</router-link>
                <a v-else v-bind:href="item.link">{{item.title}}</a>
              </li>
<!--              <li> <router-link to="#">关于玛森</router-link> </li>-->
<!--              <li> <router-link to="#">产品动态</router-link> </li>-->
<!--              <li> <router-link to="#">解决方案</router-link> </li>-->
<!--              <li> <router-link to="#">关于我们</router-link> </li>-->
            </ul>
          </div>
          <div class="content-footer-img">
            <img v-lazy="'/imgs/header/header-logo.png'" alt="底部logo">
          </div>
          <div class="content-footer-contact">
            <span>电话：0371-63228219 </span>
            <span>
          地址：{{footerContent.address}}
        </span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-website-approve">
      <div class="masen-container">
        <p>{{footerContent.copyright}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getFooter } from '../../api'

export default {
  name: 'contentFooter',
  data() {
    return {
      footerContent: {}
    }
  },
  mounted() {
    this.getFooterContent()
  },
  methods: {
    getFooterContent() {
      getFooter().then((response) => {
        const { content } = response.data
        this.footerContent = content
      })
    },
    externalLink(link) {
      if (link === '') {
        return false
      }
      return link.startsWith('http:')
    }
  }
}
</script>

<style lang="scss">
  .content-footer{
    background: #434343;
    margin-top: 80px;
    .content-footer-warp{
      margin-bottom: 65px;
      .masen-container{
        .content-footer-main{
          text-align: center;
          .content-footer-nav{
            padding-top: 55px;
            ul{
              display: flex;
              justify-content: center;
              li{
                display: inline-block;
                a{
                  padding-left: 30px;
                  color: #CCCCCC;
                }
              }
            }
          }
          .content-footer-img{
            padding-top: 35px;
            img{
              width: 42px;
              height: 42px;
            }
          }
          .content-footer-contact{
            padding-top: 30px;
            span{
              display: block;
              color: #999999;
              padding-top: 10px;
            }
          }
        }
      }
    }
    .footer-website-approve{

      border-top: 1px solid #666666;
      .masen-container{
        text-align: center;
        p{
          color: #999999;
          padding: 15px 0px;
        }
      }
    }
  }
</style>
